import { OneModal } from '@/components/one-ui';
import { IOneModalRef } from '@/pages/type';
import { Ref, useEffect, useRef } from 'react';
import { AnnounceManageAPI } from '../common/type';
import pageStyles from '@/common/pageLayout.less';
import { Col, Form, Input, message, Row, Select, Spin, TreeSelect } from 'antd';
import {
  getCompanyID,
  getDeptPosTreeIcon,
  getPosIDs,
  getTenantID,
  getUserDepID,
  getUserID,
  loopArray,
} from '@/utils';
import MyIcon from '@/components/MyIcon';
import {
  getFlowOrgTreeByOrgIDService,
  getUserDataList,
  loadMdicMap,
} from '@/services/BaseLayout';
import { addCheckService, cancelService } from '../service';
import { useRequest } from 'umi';

export const AnnounceCancelModal: React.FC<AnnounceManageAPI.IAnnounceCancelModal> = ({
  onClose,
  isShowModal, //是否显示modal
  checkRows,
  reloadAnnounce,
}) => {
  const cencelModalRef: Ref<IOneModalRef> = useRef(null); //弹框的ref
  const [cencelForm] = Form.useForm(); //表单 form

  /* 关闭弹窗 */
  const onCloseModal = () => {
    if (cencelModalRef) {
      if (cencelModalRef.current) {
        if (cencelModalRef.current.onModalCancel) {
          cencelModalRef.current.onModalCancel();
        }
      }
    }
  };

  /**
   * 获取数据字典loadMdicMap
   */
  const loadMdicMapList = useRequest(
    () => {
      return loadMdicMap([`${getTenantID()}1203`]);
    },
    { manual: false },
  );

  /**
   * 作废接口回调
   * @param res
   */
  const cancelCallback = (res: any) => {
    if (res && res?.msgFlag) {
      message.success(res?.msg);
      reloadAnnounce();
      onCloseModal();
    } else {
      message.error(res?.msg);
    }
  };

  /**
   * 引入作废接口
   */
  const { cancelLoading, cancelRun } = cancelService(cancelCallback);

  /**
   * 保存
   */
  const saveCheck = () => {
    cencelForm?.validateFields()?.then((values: any) => {
      let cancelObj: any = {
        ...values,
        id: checkRows?.id,
        versionNum: checkRows.versionNum,
        state: `${getTenantID()}12021004`,
      };
      cancelRun(cancelObj);
    });
  };

  return (
    <>
      <OneModal
        open={true}
        getContainer={false}
        ref={cencelModalRef}
        title={'作废公告'}
        width={document.body.clientWidth * 0.25}
        onCancel={onClose}
        bodyStyle={{
          padding: '5px 0px',
        }}
        centered
        onOk={saveCheck}
        confirmLoading={loadMdicMapList?.loading || cancelLoading}
      >
        <Spin spinning={loadMdicMapList?.loading || cancelLoading}>
          <div className={pageStyles['fromView-styles']}>
            <Form labelAlign="right" form={cencelForm}>
              <Row>
                <Col span={24}>
                  <Form.Item
                    name="cancelType"
                    label="作废类型"
                    rules={[
                      {
                        required: true,
                        message: '请选择作废类型',
                      },
                    ]}
                  >
                    <Select
                      placeholder="请选择作废类型"
                      allowClear
                      loading={loadMdicMapList?.loading}
                    >
                      {loadMdicMapList?.data?.obj?.[
                        `${getTenantID()}1203`
                      ]?.map((item: any) => {
                        return (
                          <Select.Option key={item?.id} value={item?.id}>
                            {item?.name}
                          </Select.Option>
                        );
                      })}
                    </Select>
                  </Form.Item>
                </Col>
                <Col span={24}>
                  <Form.Item label="作废原因" name="cancelReason">
                    <Input.TextArea
                      placeholder={`请输入作废原因`}
                      showCount
                      maxLength={200}
                      autoSize={{ minRows: 2, maxRows: 4 }}
                    />
                  </Form.Item>
                </Col>
              </Row>
            </Form>
          </div>
        </Spin>
      </OneModal>
    </>
  );
};
